<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height:300px;min-height:300px overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="handleChange"
      />
    </div>
</template>


<script>
 import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {uploadFile} from "/@/api/app"
export default {
  components: { Editor, Toolbar },
  props:{},
  emits: {
		'courserHtml': null,
		 
	},
  setup(props,context) {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('')

    // 模拟 ajax 异步获取内容
    onMounted(() => {
        // setTimeout(() => {
        //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
        // }, 1500)
    })

    const toolbarConfig = {

    }
    const editorConfig = { placeholder: '请输入内容...' ,
    scroll :true,
            MENU_CONF: {
         uploadImage: {
     
    //            customInsert(res, insertFn) {
    //     // res 即服务端的返回结果

    //     // 从 res 中找到 url alt href ，然后插图图片
    //     console.log(res)
    //     // insertFn(url, alt, href)
    // },
     async customUpload(file, insertFn) {
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
  
      const formData = new FormData()
     
      formData.append('img', file)
      uploadFile(formData).then((res) => {
           const { code, result:{data}} = res
           insertFn(data, '', '')
           console.log(res)
      }).catch((error) => {
          data.onError() //上传失败
        })
   
        // insertFn(url, alt, href)
    },
    }
    },
   
    }
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
   const handleChange = (editor) => { 
       context.emit('courserHtml', {
				html:valueHtml.value,
				 
			})
    }
    const upDate=(n)=>{
      var reg = /<(p)[^>]*>/g
       if(reg.test(n)){
        
 
        valueHtml.value = n
       }else{
         valueHtml.value = `<p>${n}</p>`
       }
      
    }
    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleChange,
      upDate
    };
  }
}
</script>
<style scoped lang='less'>
</style>